<template>
  <div>
    <el-cascader
      v-model="form.checkList"
      :options="province"
      @change="handleChange"
      ref="cascader"
    ></el-cascader>
  </div>
</template>

<script>
import { getCityListApi } from '../api/hearch'
export default {
  name: 'city',
  data () {
    return {
      province: [],
      form: {
        checkList: [],
        address: '',
        strList: []
      }
    }
  },
  methods: {
    async getCity () {
      const res = await getCityListApi()
      const list = this.toLabel(res)
      const rs = this.$GLOBAL.toTree(list, '', [])
      this.province = rs
    },
    toLabel (data) {
      const arr = data.map((item) => {
        return {
          label: item.name,
          value: item.value,
          pid: item.parent || ''
        }
      })
      return arr
    },
    handleChange () {
      const str = this.$refs.cascader.getCheckedNodes()[0].pathLabels
      this.form.strList = str
      this.form.address = str[0] + '/' + str[1] + '/' + str[2]
      this.$emit('getValue', this.form)
    }
  },
  created () {
    this.getCity()
  }
}
</script>

<style>
</style>
